<template>
    <!-- 放置地图容器 -->
    <div class="map" ref="map"></div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  
  // 引入echarts
  import * as echarts from "echarts";
  
  // 引入中国地图json数据
  // import JSON from "./四川省.json";
  import JSON from './峨眉山市.json'
  
  // 获取地图DOM元素
  let map = ref();
  
  // 注册中国地图
  echarts.registerMap("china", JSON as any);
  onMounted(() => {
    let myMap = echarts.init(map.value);
    //设置配置项
    myMap.setOption({
      geo: {
        map: "china",
        roam: true, //鼠标缩放
        zoom: 2.8,
        //地图位置
        left: 565,
        top: 300,
        // bottom: 0,
        // right: 0,
        // 地图文字设置
        label: {
          show: true,
          color: "white",
          fontSize: 13,
        },
        itemStyle: {
          color:
            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 渐变效果
              colorStops: [
                {
                  offset: 0,
                  color: "#022960", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#023481", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          // 边框设置样式
          borderColor: "#179FCB",
          shadowColor: "rgba(23,159,203, 0.5)",
          shadowBlur: 17,
        },
        //   地图高亮效果
        emphasis: {
          itemStyle: {
            color: "#1369CD",
          },
          label: {
            color: "#82B9F8",
          },
        },
      },
      series: [
        // 取消航线相关代码
      ],
    });
  });
  </script>
  
  <style scoped lang="scss">
  .map {
    width: 100%;
    height: 100%;
    // background: rgb(214, 215, 228);
    // opacity: 0.9;
  }
  </style>
  